<template>
    <ul v-show="isShow" class="menu-c-popup" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
        <li v-for="(item, idx) in selectedItem.data" :key="idx" class="detail-item">
            <a href="/" class="item">
                <img width="40" height="40" :src="item.img" alt="">
                <span class="title">{{ item.title }}</span>
            </a>
        </li>
    </ul>
</template>

<script>
    export default {
        name: "menu-c-pop",
        props: {
            selectedItem: {
                type: Object,
                default() {
                    return {}
                }
            },
            isShow: Boolean
        },
        methods: {
            onMouseEnter() {
                this.$emit('mouse-enter')
            },
            onMouseLeave() {
                this.$emit('mouse-leave')
            }
        }
    }
</script>

<style scoped lang="stylus">
.menu-c-popup
    list-style none
    margin 0
    padding 0
    background-color #fff
    border 1px solid #dfdfdf
    //z-index 50
    box-shadow: 0 8px 16px rgba(0,0,0,0.18)
    writing-mode vertical-lr /**step:1*/
    .detail-item
        width 248px
        height 76px
        padding 18px 20px
        box-sizing border-box
        display inline-block /**step:2*/
        float left /**step:3*/
        .item
            display flex
            align-items center
            font-size 14px
            color #333
            writing-mode horizontal-tb /**step:4*/
            &:hover
                color #ff6700
            .title
                margin-left 12px
</style>